

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>React v0.12 - React Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="React v0.12 - React Blog">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html">
  <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
  <meta property="og:description" content="We&#39;re happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!
">
  <meta property="fb:app_id" content="623268441017527">

  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
  <link rel="stylesheet" href="/css/syntax.css">
  <link rel="stylesheet" href="/css/codemirror.css">
  <link rel="stylesheet" href="/css/react.css">

  <script src="//use.typekit.net/vqa1hcx.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>

  <!--[if lte IE 8]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/es5-shim.min.js"></script>
  <script src="/js/es5-sham.min.js"></script>
  <![endif]-->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
  <script src="/js/codemirror.js"></script>
  <script src="/js/javascript.js"></script>
  <script src="/js/xml.js"></script>
  <script src="/js/jsx.js"></script>
  <script src="/js/react.js"></script>
  <script src="/js/react-dom.js"></script>
  <script src="/js/babel.min.js"></script>
  <script src="/js/live_editor.js"></script>
</head>
<body>

  <div class="container">

    <div class="nav-main">
  <div class="wrap">
    <a class="nav-home" href="/">
      <img class="nav-logo" src="/img/logo.svg" width="36" height="36">
      React
    </a>
    <div class="nav-lists">
      <ul class="nav-site nav-site-internal">
        <li><a href="/docs/hello-world.html">Docs</a></li>
        <li><a href="/tutorial/tutorial.html">Tutorial</a></li>
        <li><a href="/community/support.html">Community</a></li>
        <li><a href="/blog/" class="active">Blog</a></li>
        <li class="nav-site-search">
          <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
        </li>
      </ul>
      <ul class="nav-site nav-site-external">
        <li><a href="https://github.com/facebook/react">GitHub</a></li>
        <li><a href="https://github.com/facebook/react/releases">v16.0.0-alpha.3</a></li>
      </ul>
    </div>
  </div>
</div>


    <section class="content wrap blogContent">

  <div class="inner-content">
    

<h1>

  React v0.12

</h1>

<p class="meta">
  October 28, 2014
  by
  
    
      <a href="https://twitter.com/zpao">Paul O’Shannessy</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>We&#39;re happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!</p>

<p>We have talked a lot about some of the bigger changes in this release. <a href="/blog/2014/10/14/introducing-react-elements.html">We introduced new terminology</a> and changed APIs to clean up and simplify some of the concepts of React. <a href="/blog/2014/10/16/react-v0.12-rc1.html">We also made several changes to JSX</a> and deprecated a few functions. We won&#39;t go into depth about these changes again but we encourage you to read up on these changes in the linked posts. We&#39;ll summarize these changes and discuss some of the other changes and how they may impact you below. As always, a full changelog is also included below.</p>

<p>The release is available for download:</p>

<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-0.12.0.js">https://fb.me/react-0.12.0.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.12.0.min.js">https://fb.me/react-0.12.0.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.12.0.js">https://fb.me/react-with-addons-0.12.0.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.12.0.min.js">https://fb.me/react-with-addons-0.12.0.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.12.0.js">https://fb.me/JSXTransformer-0.12.0.js</a></li>
</ul>

<p>We&#39;ve also published version <code>0.12.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>

<h2>New Terminology &amp; Updated APIs</h2>

<p>v0.12 is bringing about some new terminology. <a href="/blog/2014/10/14/introducing-react-elements.html">We introduced</a> this 2 weeks ago and we&#39;ve also documented it in <a href="/docs/glossary.html">a new section of the documentation</a>. As a part of this, we also corrected many of our top-level APIs to align with the terminology. <code>Component</code> has been removed from all of our <code>React.render*</code> methods. While at one point the argument you passed to these functions was called a Component, it no longer is. You are passing ReactElements. To align with <code>render</code> methods in your component classes, we decided to keep the top-level functions short and sweet. <code>React.renderComponent</code> is now <code>React.render</code>.</p>

<p>We also corrected some other misnomers. <code>React.isValidComponent</code> actually determines if the argument is a ReactElement, so it has been renamed to <code>React.isValidElement</code>. In the same vein, <code>React.PropTypes.component</code> is now <code>React.PropTypes.element</code> and <code>React.PropTypes.renderable</code> is now <code>React.PropTypes.node</code>.</p>

<p>The old methods will still work but will warn upon first use. They will be removed in v0.13.</p>

<h2>JSX Changes</h2>

<p><a href="/blog/2014/10/16/react-v0.12-rc1.html#jsx-changes">We talked more in depth about these before</a>, so here are the highlights.</p>

<ul>
<li>No more <code>/** @jsx React.DOM */</code>!</li>
<li>We no longer transform to a straight function call. <code>&lt;Component/&gt;</code> now becomes <code>React.createElement(Component)</code></li>
<li>DOM components don&#39;t make use of <code>React.DOM</code>, instead we pass the tag name directly. <code>&lt;div/&gt;</code> becomes <code>React.createElement(&#39;div&#39;)</code></li>
<li>We introduced spread attributes as a quick way to transfer props.</li>
</ul>

<h2>DevTools Improvements, No More <code>__internals</code></h2>

<p>For months we&#39;ve gotten complaints about the React DevTools message. It shouldn&#39;t have logged the up-sell message when you were already using the DevTools. Unfortunately this was because the way we implemented these tools resulted in the DevTools knowing about React, but not the reverse. We finally gave this some attention and enabled React to know if the DevTools are installed. We released an update to the devtools several weeks ago making this possible. Extensions in Chrome should auto-update so you probably already have the update installed!</p>

<p>As a result of this update, we no longer need to expose several internal modules to the world. If you were taking advantage of this implementation detail, your code will break. <code>React.__internals</code> is no more.</p>

<h2>License Change - BSD</h2>

<p>We updated the license on React to the BSD 3-Clause license with an explicit patent grant. Previously we used the Apache 2 license. These licenses are very similar and our extra patent grant is equivalent to the grant provided in the Apache license. You can still use React with the confidence that we have granted the use of any patents covering it. This brings us in line with the same licensing we use across the majority of our open source projects at Facebook.</p>

<p>You can read the full text of the <a href="https://github.com/facebook/react/blob/master/LICENSE">LICENSE</a> and <a href="https://github.com/facebook/react/blob/master/PATENTS"><code>PATENTS</code></a> files on GitHub.</p>

<hr>

<h2>Changelog</h2>

<h3>React Core</h3>

<h4>Breaking Changes</h4>

<ul>
<li><code>key</code> and <code>ref</code> moved off props object, now accessible on the element directly</li>
<li>React is now BSD licensed with accompanying Patents grant</li>
<li>Default prop resolution has moved to Element creation time instead of mount time, making them effectively static</li>
<li><code>React.__internals</code> is removed - it was exposed for DevTools which no longer needs access</li>
<li>Composite Component functions can no longer be called directly - they must be wrapped with <code>React.createFactory</code> first. This is handled for you when using JSX.</li>
</ul>

<h4>New Features</h4>

<ul>
<li>Spread operator (<code>{...}</code>) introduced to deprecate <code>this.transferPropsTo</code></li>
<li>Added support for more HTML attributes: <code>acceptCharset</code>, <code>classID</code>, <code>manifest</code></li>
</ul>

<h4>Deprecations</h4>

<ul>
<li><code>React.renderComponent</code> --&gt; <code>React.render</code></li>
<li><code>React.renderComponentToString</code> --&gt; <code>React.renderToString</code></li>
<li><code>React.renderComponentToStaticMarkup</code> --&gt; <code>React.renderToStaticMarkup</code></li>
<li><code>React.isValidComponent</code> --&gt; <code>React.isValidElement</code></li>
<li><code>React.PropTypes.component</code> --&gt; <code>React.PropTypes.element</code></li>
<li><code>React.PropTypes.renderable</code> --&gt; <code>React.PropTypes.node</code></li>
<li><strong>DEPRECATED</strong> <code>React.isValidClass</code></li>
<li><strong>DEPRECATED</strong> <code>instance.transferPropsTo</code></li>
<li><strong>DEPRECATED</strong> Returning <code>false</code> from event handlers to preventDefault</li>
<li><strong>DEPRECATED</strong> Convenience Constructor usage as function, instead wrap with <code>React.createFactory</code></li>
<li><strong>DEPRECATED</strong> use of <code>key={null}</code> to assign implicit keys</li>
</ul>

<h4>Bug Fixes</h4>

<ul>
<li>Better handling of events and updates in nested results, fixing value restoration in &quot;layered&quot; controlled components</li>
<li>Correctly treat <code>event.getModifierState</code> as case sensitive</li>
<li>Improved normalization of <code>event.charCode</code></li>
<li>Better error stacks when involving autobound methods</li>
<li>Removed DevTools message when the DevTools are installed</li>
<li>Correctly detect required language features across browsers</li>
<li>Fixed support for some HTML attributes:

<ul>
<li><code>list</code> updates correctly now</li>
<li><code>scrollLeft</code>, <code>scrollTop</code> removed, these should not be specified as props</li>
</ul></li>
<li>Improved error messages</li>
</ul>

<h3>React With Addons</h3>

<h4>New Features</h4>

<ul>
<li><code>React.addons.batchedUpdates</code> added to API for hooking into update cycle</li>
</ul>

<h4>Breaking Changes</h4>

<ul>
<li><code>React.addons.update</code> uses <code>assign</code> instead of <code>copyProperties</code> which does <code>hasOwnProperty</code> checks. Properties on prototypes will no longer be updated correctly.</li>
</ul>

<h4>Bug Fixes</h4>

<ul>
<li>Fixed some issues with CSS Transitions</li>
</ul>

<h3>JSX</h3>

<h4>Breaking Changes</h4>

<ul>
<li>Enforced convention: lower case tag names are always treated as HTML tags, upper case tag names are always treated as composite components</li>
<li>JSX no longer transforms to simple function calls</li>
</ul>

<h4>New Features</h4>

<ul>
<li><code>@jsx React.DOM</code> no longer required</li>
<li>spread (<code>{...}</code>) operator introduced to allow easier use of props</li>
</ul>

<h4>Bug Fixes</h4>

<ul>
<li>JSXTransformer: Make sourcemaps an option when using APIs directly (eg, for react-rails)</li>
</ul>

</div>


  <div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>


  </div>
  <div class="nav-docs nav-blog">
  <div class="nav-docs-section">
    <h3>Recent posts</h3>
    <ul>
      
        <li><a href="/blog/2016/11/16/react-v15.4.0.html">React v15.4.0</a></li>
      
        <li><a href="/blog/2016/09/28/our-first-50000-stars.html">Our First 50,000 Stars</a></li>
      
        <li><a href="/blog/2016/08/05/relay-state-of-the-state.html">Relay: State of the State</a></li>
      
        <li><a href="/blog/2016/07/22/create-apps-with-no-configuration.html">Create Apps with No Configuration</a></li>
      
        <li><a href="/blog/2016/07/13/mixins-considered-harmful.html">Mixins Considered Harmful</a></li>
      
        <li><a href="/blog/2016/07/11/introducing-reacts-error-code-system.html">Introducing React's Error Code System</a></li>
      
        <li><a href="/blog/2016/04/08/react-v15.0.1.html">React v15.0.1</a></li>
      
        <li><a href="/blog/2016/04/07/react-v15.html">React v15.0</a></li>
      
        <li><a href="/blog/2016/03/29/react-v0.14.8.html">React v0.14.8</a></li>
      
        <li><a href="/blog/2016/03/16/react-v15-rc2.html">React v15.0 Release Candidate 2</a></li>
      
      <li><a href="/blog/all.html">All posts ...</a></li>
    </ul>
  </div>
</div>

</section>


    <footer class="nav-footer">
  <section class="sitemap">
    <a href="/" class="nav-home">
    </a>
    <div>
      <h5><a href="/docs/">Docs</a></h5>
      <a href="/docs/hello-world.html">Quick Start</a>
      <a href="/docs/thinking-in-react.html">Thinking in React</a>
      <a href="/tutorial/tutorial.html">Tutorial</a>
      <a href="/docs/jsx-in-depth.html">Advanced Guides</a>
    </div>
    <div>
      <h5><a href="/community/support.html">Community</a></h5>
      <a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
      <a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
      <a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
      <a href="https://www.facebook.com/react" target="_blank">Facebook</a>
      <a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
    </div>
    <div>
      <h5><a href="/community/support.html">Resources</a></h5>
      <a href="/community/conferences.html">Conferences</a>
      <a href="/community/videos.html">Videos</a>
      <a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
      <a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
    </div>
    <div>
      <h5>More</h5>
      <a href="/blog/">Blog</a>
      <a href="https://github.com/facebook/react" target="_blank">GitHub</a>
      <a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
      <a href="/acknowledgements.html">Acknowledgements</a>
    </div>
  </section>
  <a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
    <img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
  </a>
  <section class="copyright">
    Copyright © 2017 Facebook Inc.
  </section>
</footer>

  </div>

  <div id="fb-root"></div>
  <script src="/js/anchor-links.js"></script>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-41298772-1', 'facebook.github.io');
    ga('send', 'pageview');

    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=623268441017527";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    docsearch({
      apiKey: '36221914cce388c46d0420343e0bb32e',
      indexName: 'react',
      inputSelector: '#algolia-doc-search'
    });
  </script>
</body>
</html>
